<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片试图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.uname">
            <el-button slot="append" icon="el-icon-search" @click="seach"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="queryInfo" border stripe>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="姓名" prop="uname"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="phone"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope"><!--固定写法添加插槽接收当前行的数据-->
           <!--  固定写法scope.row就是这一行所有的数据 -->
            <el-switch
              v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"><!--绑定属性值-->
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.uid)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.uid)"></el-button>
            <!-- 分配角色按钮 -->
            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </el-card>


    <!-- 添加用户的对话框 -->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
      >
      <!-- 内容主体区 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改用户的对话框 -->
    <el-dialog
      title="修改用户"
      :visible.sync="aditDialogVisible"
      width="50%"
      @close="editDialogClosed"
      >
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.uname" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role_name">
          <el-input v-model="editForm.role_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="aditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data(){

    //验证邮箱的规则
    var checkEmail=(rule,value,cb)=>{
      //验证邮箱的正则表达式
      const regEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
      if(regEmail.test(value)){
        //合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }

    //验证手机号的规则
    var checkMobile=(rule,value,cb)=>{
      //验证手机号的正则表达式
      const regMobile=/^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if(regMobile.test(value)){
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }

    return{
      //获取用户列表的参数对象
      queryInfo:[],
       //当前显示第几页数据
       page:1,
      //用于存储当前分页显示的总数量
      pagesize:5,
      // 总数量
      count:0,
      query:'',
      //控制添加用户对话框的显示与隐藏
      addDialogVisible:false,
      //添加用户的表单数据
      //查询到的用户信息对象
      editForm:{},
      //修改表单验证规则对象
      editFormRules:{
        email:[
          {required:true,message:'请输入用户邮箱',trigger:'blur'},
          {validator:checkEmail,trigger:'blur'}
        ],
        phone:[
          {required:true,message:'请输入用户手机',trigger:'blur'},
          {validator:checkMobile,trigger:'blur'}
        ]
      },
      addForm:{
        username:"",
        password:"",
        email:"",
        mobile:""
      },
      addFormRules:{
        username:[
        { required: true, message: '请输入用户名', trigger: 'blur' },
        {min:3,max:10,message:'用户名的长度在3~10个字符之间',trigger: 'blur'}
        ],
        password:[
        { required: true, message: '请输入密码', trigger: 'blur' },
        {min:6,max:15,message:'用户名的长度在6~15个字符之间',trigger: 'blur'}
        ],
        email:[
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        {validator:checkEmail, trigger: 'blur' }
        ],
        mobile:[
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        {validator:checkMobile, trigger: 'blur' }
        ],
      },
      //控制修改用户对话框的显示与隐藏
      aditDialogVisible:false,
    }
  },
  created(){
    this.getUserList()
  },
  methods: {
    getUserList(){
      this.axios.get('/user',{params:{page:this.page,pagesize:this.pagesize}}).then(res=>{
        // console.log(res.data.result);
        this.queryInfo=res.data.result;
        for(var i=0;i<this.queryInfo.length;i++){
          this.queryInfo[i].mg_state=this.queryInfo[i].mg_state?true:false
        }
        // this.pagesiz=res.data.pagesize;
        this.count=res.data.count;
      })
    },

    //搜索关键字
    seach(){
      this.axios.get('/seach',{params:{uname:this.queryInfo.uname}}).then(res=>{
        console.log(res);
        this.queryInfo=res.data.result;
      })
    },

    //监听pagesize改变的事件
    handleSizeChange(newSize){
      // console.log(newSize);
      this.pagesize=newSize,
      this.getUserList()

    },
    //监听页码值改变的事件
    handleCurrentChange(newPage){
      // console.log(newPage);
      this.page=newPage;
      this.getUserList()
    },
    //监听switch状态的改变
      userStateChanged(userinfo){
      // console.log(userinfo);
      this.axios.put("/users",{uid:userinfo.uid,mg_state:userinfo.mg_state}).then(res=>{
        // window.sessionStorage.setItem('info',true);
    
        console.log(res);
        if(res.data.code!==200){
          userinfo.mg_state=!userinfo.mg_state;
          this.$message.error('更新数据失败');
        }else{
          // window.sessionStorage.setItem('info',true)
          this.$message.success('更新数据成功');
          userinfo.mg_state=userinfo.mg_state;
        }
      });
    },
    //监听添加用户对话框的关闭事件
    addDialogClosed(){
      //关闭对话框后表单重置为初始状态
      this.$refs.addFormRef.resetFields()
    },
    //点击按钮，添加新用户
    addUser(){
      this.$refs.addFormRef.validate(valid=>{
        if(!valid)return
        //可以发起添加用户的网络请求
        this.axios.post('/users',{addForm:this.addForm}).then(res=>{
          // console.log(res);
          if(res.data.code!==201) {
            this.$message.error('添加用户失败')
          }
          this.$message.success('添加用户成功');
          //隐藏添加用户的对话框
          this.addDialogVisible=false;
          //重新获取用户列表数据
          this.getUserList();
        })
      })
    },
    //展示编辑用户的对话框
    showEditDialog(uid){
      // console.log(uid);
      this.axios.get('/users',{params:{id:uid}}).then(res=>{
        // console.log(res.data.result)
        if(res.data.code!==201){
          return this.$message.error('查询用户信息失败');
        }
        this.editForm=res.data.result[0];
      })
      this.aditDialogVisible=true
    },
    //监听修改用户对话框的关闭事件
    editDialogClosed(){//重置
      this.$refs.editFormRef.resetFields()
    },
    //修改用户信息并提交
    editUserInfo(){
      this.$refs.editFormRef.validate(valid=>{//预校验
        console.log(valid)
        if(!valid) return
        //发起用户信息的用户请求
        this.axios.put('/use',
        {
            uid:this.editForm.uid,
            email:this.editForm.email,
            phone:this.editForm.phone,
            role_name:this.editForm.role_name
        }).then(res=>{
          if(res.data.code!==200){
            return this.$message.error('更新用户信息失败！');
          }
          //关闭对话框
          this.aditDialogVisible=false;
          //刷新数据列表
          this.getUserList()
          //提示修改成功
          this.$message.success('更新用户信息成功！')
        });
      })
    },


    //根据id删除对应的用户信息
    async removeUserById(uid){
      //弹框询问顾客是否删除
      const confirmResult=await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        //如果用户确认删除，则返回值为字符串 confirm
        //如果用户取消了删除，则返回值为字符串cancel
        console.log(confirmResult);
        if(confirmResult!=='confirm'){
          return this.$message.info('已取消删除');
        }
        //console.log('已确认删除');
        //const {data:res}=await this.axios.delete('/users',{params:{uid:uid}})
        this.axios.delete('/users',{params:{uid:uid}}).then(res=>{
          if(res.data.code!==200){
            return this.$message.error('删除用户失败！');
          };
          this.$message.success('删除用户成功');
          //刷新数据列表
          this.getUserList()
        })
        
    }
  },
}
</script>
<style lang="less" scoped>
  .el-table{
    margin-top: 15px;
    font-size: 12px;
  }
</style>